이벤트 리스너

✒️ 2025-05-23 15:18 내용 수정

참고 자료 : TCPSchool js eventlistener register

이벤트가 발생 했을 때 그 처리를 담당하는 함수

Java의 Event 다룰 때와 비슷하다. Event 클래스와 Listener 인터페이스 참고
Event Listener는 객체나 요소에 등록되어야만 호출될 수 있으며, 호출 방법은 여러 가지가 존재한다.
- Java에서 addEventListener()를 해야만 이벤트 처리가 되는 것과 동일하다.

Event Listener 호출

참고 자료 : TCPSchool eventlistener call
Event Listener를 객체에 등록한 후 해당 객체나 요소에 지정된 타입의 이벤트가 발생하면, 브라우저는 자동으로 등록되어 있는 Event Listener를 호출한다.
Event Listener는 이벤트 객체를 전달 받아 식별자를 통해 전달 받은 이벤트 객체를 참조한다.
호출 순서 : 이벤트 대상 객체나 요소의 property로 등록된 Event Listener -> addEventListener()로 추가한 Event Listener

1. HTML 속성에 Event Listener 추가

이벤트를 HTML 요소에 직접 추가할 수 있다.
한 개나 두 개 정도의 element의 기능을 추가할 때는 좋으나, 개수가 많아지면 코드가 복잡해진다.
상황에 따라 addEventListener 추가 방식을 사용하거나, 이 방법을 변형해서 사용한다.

<body>
	<태그명 on이벤트객체="함수()">content</태그명>

	<script>
		function 함수() {
			/* 실행할 내용 */
		}
	</script>
</body>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
	</head>
	<body>
		<button onclick="clickFunction()">버튼1</button>
		
		<p>버튼1을 누르면 색이 변합니다.</p>
		<p>이 단락은 변하지 않습니다.</p>
		
		<script>
			let text = document.getElementsByTagName('p')[0]; // 첫번째 p 태그만 가져오기
			
			function clickFunction() {
				text.style.cssText = 'color:red; font-weight:bold;';
			}
		</script>
	</body>
</html>

이벤트 1.png

이벤트 2.png

2. JavaScript에서 property를 등록

property listener 방식은 이벤트 대상에 해당하는 객체의 property로 이벤트를 등록한다.
1번 방식과 달리 HTML과 JavaScript를 분리할 수 있다.
하지만 이벤트 타입별로 오직 하나의 Event Listener만 등록할 수 있다.
다른 두 방법에 비해 사용 빈도가 낮다.

<body>
	<태그명 class="클래스명">content</태그명>

	<script>
		let test = document.getElementByClassName('.클래스명');
		
		test.on이벤트객체 = function() {
			/* 실행할 내용 */
		}
	</script>
</body>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
	</head>
	<body>
		<button class="bt">버튼2</button>
		
		<script>
			let bt = document.querySelector('.bt');
			
			bt.onclick = function() {
				alert("먼저 입력한 함수가 적용되지 않습니다.");
			}
			
			bt.onclick = function() {
				alert("버튼2를 눌렀습니다.");
			}
		</script>
	</body>
</html>

이벤트 3.png

3. DOM 요소에 Event Listener 추가

JavaScript를 이용하여 이벤트를 만들고 DOM 요소에 추가한다.
addEventListener() 나 attachEvent() 함수를 사용한다.
- addEventListener()는 익스플로러 8과 그 이전 버전, 오페라6와 그 이전 버전에선 지원하지 않기 때문에 attachEvent()를 사용해야 한다.
element가 많을 때 사용하면 코드가 비교적 간편해진다.

대상객체.addEventListener(이벤트이름, 이벤트리스너, 이벤트전파방식);

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
	</head>
	<body>
		
		<button id="bt1">버튼1</button>
		<input type="button" value="버튼2" id="bt2"></input>
		<input type="button" value="버튼3" id="bt3"></input>
		
		<script>
			document.getElementById('bt1').addEventListener('contextmenu', function() {
				alert('버튼1을 우클릭 했습니다.');
			})
			
			let btn2 = document.querySelector('#bt2');
			let btn3 = document.querySelector('#bt3');
			
			function bt_listener(event) {
				switch(event.target.id) {
					case 'bt2':
					alert('버튼2를 눌렀습니다.');
					break;
					case 'bt3':
					alert('버튼3을 눌렀습니다.');
					break;
				}
			}
			
			btn2.addEventListener('click', bt_listener);
			btn3.addEventListener('click', bt_listener);
			
		</script>
	</body>
</html>

이벤트 4.png
이벤트 5.png
이벤트 6.png

Event Listener 제거

removeEventListener() 함수로 객체에 등록된 Event Listener를 제거할 수 있다.

대상객체.removeEventListener(이벤트이름, 이벤트리스너);